<template>
  <div class="frame">
    <div class="content" v-if="isDoAnimate">
      <slot></slot>
      <div class="top-border-in" :style="borderStyle"></div>
      <div class="top-border-out" :style="borderStyle"></div>
      <div class="left-border-in" :style="borderStyle"></div>
      <div class="left-border-out" :style="borderStyle"></div>
      <div class="bottom-border-in" :style="borderStyle"></div>
      <div class="bottom-border-out" :style="borderStyle"></div>
      <div class="right-border-in" :style="borderStyle"></div>
      <div class="right-border-out" :style="borderStyle"></div>
    </div>
    <div class="content" v-else>
      <slot></slot>
      <div class="top-border" :style="borderStyle"></div>
      <div class="left-border" :style="borderStyle"></div>
      <div class="bottom-border" :style="borderStyle"></div>
      <div class="right-border" :style="borderStyle"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "animate-border",
    data () {
      return {
        isDoAnimate: false,
        borderStyle: '',
        textStyle: ''
      };
    },
    props: {
      borderColor: String,
      animate: Boolean
    },
    mounted() {
      this.isDoAnimate = this.animate ? this.animate : false;
      const borderColor = this.borderColor ? this.borderColor : '#e34981';
      this.borderStyle = 'background-color: ' + borderColor;
    }
  }
</script>

<style scoped>
  .frame {
    position: relative;
    display: inline-block;
  }

  .content {
    display: inline-block;
    padding: 10px;
    font-size: 1.3em;
    font-weight: lighter;
  }

  .top-border {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    animation: render-width 1500ms linear;
    animation-fill-mode: both;
  }

  .bottom-border {
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    right: 0;
    animation: render-width 1500ms linear;
  }

  .left-border {
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0;
    bottom: 0;
    animation: render-height 1500ms linear;
  }

  .right-border {
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0;
    top: 0;
    animation: render-height 1500ms linear;
  }


  @keyframes render-width {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }

  @keyframes render-height {
    from {
      height: 0;
    }

    to {
      height: 100%;
    }
  }


  .top-border-in {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    animation: render-width-in 1500ms linear infinite;
    animation-fill-mode: both;
  }

  .top-border-out {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    right: 0;
    animation: render-width-out 1500ms linear infinite;
    animation-fill-mode: both;
  }

  .bottom-border-in {
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    right: 0;
    animation: render-width-in 1500ms linear infinite;
  }

  .bottom-border-out {
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    animation: render-width-out 1500ms linear infinite;
  }

  .left-border-in {
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0;
    bottom: 0;
    animation: render-height-in 1500ms linear infinite;
  }

  .left-border-out {
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0;
    top: 0;
    animation: render-height-out 1500ms linear infinite;
  }

  .right-border-in {
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0;
    top: 0;
    animation: render-height-in 1500ms linear infinite;
  }

  .right-border-out {
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0;
    bottom: 0;
    animation: render-height-out 1500ms linear infinite;
  }


  @keyframes render-width-in {
    0% {
      width: 0;
      opacity: 1;
    }

    25% {
      width: 100%;
      opacity: 1;
    }

    50% {
      opacity: 1;
    }

    51% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes render-width-out {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 0;
    }

    51% {
      width: 100%;
      opacity: 1;
    }

    75% {
      width: 0;
      opacity: 1;
    }

    100% {
      width: 0;
      opacity: 1;
    }
  }

  @keyframes render-height-in {
    0% {
      height: 0;
      opacity: 1;
    }

    25% {
      height: 100%;
      opacity: 1;
    }

    50% {
      opacity: 1;
    }

    51% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes render-height-out {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 0;
    }

    51% {
      height: 100%;
      opacity: 1;
    }

    75% {
      height: 0;
      opacity: 1;
    }

    100% {
      height: 0;
      opacity: 1;
    }
  }
</style>
